/*
 * @Author: mingming.shan
 * @Effect: 单个拍照icon组件
 * @Date: 2018-06-25 15:51:31
 * @Last Modified by: mingming.shan
 * @Last Modified time: 2018-08-03 10:29:35
 */
<template>
  <div>
    <div v-if="img"
      class="img-wrapper img-item-wrapper flex-h flex-hc flex-vc">
      <img class="img-content"
        :src="img.url" />
      <i class="iconfont icon-cancel right-delete-icon flex-h flex-hc flex-vc fontsize16"
        @click="close"></i>
    </div>
    <div v-else
      class="take-photo-wrapper img-item-wrapper flex-h flex-hc flex-vc"
      @click="addImg">
      <i class="iconfont icon-camera take-photo-icon"></i>
    </div>
  </div>
</template>
<style>
/* 图片块包裹层共性 */
.img-item-wrapper {
  width: 108px;
  height: 108px;
  background-color: #fff;
  margin:12px 0px 0px 32px;
}
/* 图片包裹层 */
.img-wrapper {
  position: relative;
  overflow: hidden;
}
/* 图片内容 */
.img-content {
  height: 100%;
}
/* 右上角删除按钮 */
.right-delete-icon {
  margin: 0;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 0;
  color: #ffffff;
  background-color: #000000;
  opacity: 0.5;
}
/* 拍照包裹层 */
.take-photo-wrapper {
  border:1px solid #ccc;
}
/* 拍照icon */
.take-photo-icon {
  height:48px;
  line-height:48px;
  font-size: 48px;
  color: #999;
}
</style>
<script>
/// <reference path="../../../plugins/nativePlugin.d.ts"/>
import ImgItem from '../models/imgItem.js'
export default {
  props: {
    img: {
      type: ImgItem,
      default: null
    }
  },
  methods: {
    //   删除图片
    close() {
      this.$emit('deleteImg', this.img)
    },
    // 需要添加图片
    addImg() {
      this.$emit('addImg')
    }
  }
}
</script>
